<!DOCTYPE html>
<html class="x-admin-sm"
      xmlns:th="https://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
    <head>
        <meta charset="UTF-8">
        <title th:text="${#util.properties('system.name')}"></title>
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <link rel="shortcut icon" th:href="@{/favicon.ico}" />
        <link rel="stylesheet" href="//at.alicdn.com/t/font_2678238_81zt3lo6ktc.css">
        <link rel="stylesheet" th:href="@{/assets/admin/css/font.css}">
        <link rel="stylesheet" th:href="@{/assets/admin/css/xadmin.css}">
        <!-- <link rel="stylesheet" href="./css/theme5.css"> -->
        <script th:src="@{/assets/admin/lib/layui/layui.js}" charset="utf-8"></script>
        <script type="text/javascript" th:src="@{/assets/admin/js/xadmin.js}"></script>
        <script type="text/javascript" th:src="@{/assets/js/echarts/echarts.min.js}"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <shiro:hasRole name="admin">
                                <blockquote class="layui-elem-quote">欢迎管理员：
                                    <span  th:text="${user.name}">test</span> 当前时间:[[${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd hh:mm:ss')}]]
                                </blockquote>
                            </shiro:hasRole>
                            <shiro:Role name="user">
                                <blockquote class="layui-elem-quote">欢迎你：
                                    <span  th:text="${user.name}">test</span> 当前时间:[[${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd hh:mm:ss')}]]
                                </blockquote>
                            </shiro:Role>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">数据统计</div>
                        <div class="layui-card-body ">
                            <ul class="layui-row layui-col-space10 layui-this x-admin-carousel x-admin-backlog">
                                <li class="layui-col-md2 layui-col-xs6">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h3>本日登录数</h3>
                                        <p>
                                            <cite>[[${toDayLoginTotal}]]</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-md2 layui-col-xs6">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h3>注册用户数</h3>
                                        <p>
                                            <cite>[[${registerTotal}]]</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-md2 layui-col-xs6">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h3>今日注册数</h3>
                                        <p>
                                            <cite>[[${toDayRegisterTotal}]]</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-md2 layui-col-xs6">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h3>今日匹配数</h3>
                                        <p>
                                            <cite>[[${rechargeSuccessTotal}]]</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-md2 layui-col-xs6">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h3>今日发匹配成功数</h3>
                                        <p>
                                            <cite>[[${grantTotal}]]</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-md2 layui-col-xs6 ">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h3>今日发匹配失败数</h3>
                                        <p>
                                            <cite>6766</cite></p>
                                    </a>
                                </li>
                            </ul>
                            <div class="layui-row">
                                <div id="main" class=" layui-col-md6 layui-col-xs12" style="height:400px;">左边的</div>
                                <div id="main2" class=" layui-col-md6 layui-col-xs12" style="height:400px;">右边的</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">系统信息</div>
                        <div class="layui-card-body ">
                            <table class="layui-table">
                                <tbody>
                                    <tr>
                                        <th>版本</th>
                                        <td>1.0.180420</td></tr>
                                    <tr>
                                        <th>服务器地址</th>
                                        <td th:text="${#util.properties('system.domain')}"></td></tr>
                                    <tr>
                                        <th>上传附件限制</th>
                                        <td>2M</td></tr>
                                    <tr>
                                        <th>执行时间限制</th>
                                        <td>30s</td></tr>
                                    <shiro:hasRole name="admin">
                                    <tr>
                                        <th>过期时间1</th>
                                        <!--<td>[[${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd hh:mm:ss')}]]</td>-->
                                        <td>[[${expirationDate}]]</td>
                                    </tr>
                                    </shiro:hasRole>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">开发团队</div>
                        <div class="layui-card-body ">
                            <table class="layui-table">
                                <tbody>
                                    <tr>
                                        <th>版权所有</th>
                                        <td>Harin(Harin)
                                            <!--<a href="http://x.xuebingsi.com/" target="_blank">访问官网</a>--></td>
                                    </tr>
                                    <tr>
                                        <th>开发者</th>
                                        <td>Harin-黑医(651914019@qq.com)</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <style id="welcome_style"></style>
                <div class="layui-col-md12">
                    <blockquote class="layui-elem-quote layui-quote-nm">本站基于layui开发，使用x-admin框架二次开发。感谢x-admin作者:马志斌(113664000@qq.com)</blockquote></div>
                </div>
        </div>
        </div>
    </body>
<script th:replace="systemCommon/HarinCommon :: commonJs"></script>
<script th:src="@{/assets/admin/js/jquery.min.js}"></script>
<script >
    // 基于准备好的dom，初始化echarts实例
    var app = {};
    var myChart = echarts.init(document.getElementById('main'));
    var myChart2 = echarts.init(document.getElementById('main2'));
    var option;
    var option2;
    // 指定图表的配置项和数据
    const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
    ];
    app.configParameters = {
        rotate: {
            min: -90,
            max: 90
        },
        align: {
            options: {
                left: 'left',
                center: 'center',
                right: 'right'
            }
        },
        verticalAlign: {
            options: {
                top: 'top',
                middle: 'middle',
                bottom: 'bottom'
            }
        },
        position: {
            options: posList.reduce(function (map, pos) {
                map[pos] = pos;
                return map;
            }, {})
        },
        distance: {
            min: 0,
            max: 100
        }
    };
    app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
            const labelOption = {
                rotate: app.config.rotate,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                position: app.config.position,
                distance: app.config.distance
            };
            myChart.setOption({
                series: [
                    {
                        label: labelOption
                    },
                    {
                        label: labelOption
                    },
                    {
                        label: labelOption
                    },
                    {
                        label: labelOption
                    }
                ]
            });
        }
    };
    const labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
            name: {}
        }
    };
    option = {
        title: {
            text: '最近匹配'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        color: [
            '#dd6b66',
            '#759aa0'
        ],
        legend: {
            data: ['成功', '失败']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar', 'stack'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        xAxis: [
            {
                type: 'category',
                axisTick: { show: false },
                data: ['9月1号', '9月2号', '9月3号', '9月4号', '9月5号']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '匹配数',
                type: 'bar',
                barGap: 0,
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: [320, 332, 301, 334, 390]
            },
            {
                name: '强制匹配数',
                type: 'bar',
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 1500]
            }
        ]
    };
    $.ajax({
        url: "/admin/chartData",
        type: "get",
        data : {"typeNumber":1},
        success:function (data){
            let today = new Date().format("yyyy-MM-dd");

            if(data.code == 200){
                let s1 = dateChange(-1,today);
                let s2 = dateChange(-2,today);
                let s3 = dateChange(-3,today);
                let s4 = dateChange(-4,today);
                today = dateChange(0,today);
                option.xAxis[0].data = [s4.substr(5),s3.substr(5),s2.substr(5),s1.substr(5),today.substr(5)];
                let success = data.result.success;
                let successData = [success[s4],success[s3],success[s2],success[s1],success[today]];
                let unpaid = data.result.unpaid;
                let unpaidData = [unpaid[s4],unpaid[s3],unpaid[s2],unpaid[s1],unpaid[today]];
                option.series[0].data = successData;
                option.series[1].data = unpaidData;
            }
            // 使用刚指定的配置项和数据显示图表。
            option && myChart.setOption(option);
        }
    });

    option2 = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                color: [
                    '#dd6b66',
                    '#759aa0'
                ],
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '20',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: '匹配条目数' },
                    { value: 735, name: '强制匹配数' }
                ]
            }
        ]
    };


    $.ajax({
        url:"/admin/chartData",
        type: "get",
        data : {"typeNumber":2},
        success:function (data){
            if(data.code == 200){
                option2.series[0].data = [{name: '付款金额' ,value: data.result.success},{name: '未付款金额' ,value:data.result.unpaid}]
            }
            console.log(option2);
            // 使用刚指定的配置项和数据显示图表。
            option2 && myChart2.setOption(option2);
        }
    });


</script>
</html>